<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		canvas {
			border: 1px solid #ccc;
			display: block;
			margin: 100px auto;
		}
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
	
	// 1.在画布的中心绘制一段文字
	// 2.申明一段文字
	var str = '您吃-，了吗';
	// 3.确定画布的中心
	var w = ctx.canvas.width;
	var h = ctx.canvas.height;
	// 4.画一个十字架在画布的中心
	ctx.beginPath();
	ctx.moveTo(0,h / 2 - 0.5);
	ctx.lineTo(w,h / 2 - 0.5);
	ctx.moveTo(w / 2 - 0.5,0);
	ctx.lineTo(w / 2 - 0.5,h);
	ctx.strokeStyle = '#EEEEEE';
	ctx.stroke();
	// 绘制剧本
	ctx.beginPath();
	ctx.strokeStyle = '#000000';
	var x0 = w/2;
	var y0 = h/2;
	// 注意: 起点位置在文字的左下角
	// 有文本属性 尺寸 字体 左右对齐方式 垂直对齐的方式
	ctx.font = '40px Microsoft YaHei';
	// 左右对齐方式(center left right start end) 基准起始坐标
	ctx.textAlign = 'center';
	// 垂直对齐的方式 基线baseline(top,bottom,middle) 基准起始坐标
	ctx.textBaseline = 'middle';
	// ctx.direction = 'rtl';
	// ctx.strokeText(str,x0,y0);
	ctx.fillText(str,x0,y0);
	// 6.画一个下划线和文字一样长
	ctx.beginPath();
	// 获取文本的宽度
	console.log(ctx.measureText(str));
	var width = ctx.measureText(str).width;
	ctx.moveTo(x0-width/2,y0 + 20);
	ctx.lineTo(x0+width/2,y0 + 20);
	ctx.stroke();
</script>
</body>
</html>